<template>
	<view class="container">
		<view class="header" style="background: linear-gradient(to right, #2577f5, #2577f5)">
			<view class="companyinfo">
				<view class="companyname">{{ data.companyname }}</view>

				<view class="pic">
					<view class="userinfo">
						<view>{{ data.companycate }} | {{ data.companytype }} | {{ data.companyworker }}</view>
						<view style="margin-top: 20rpx"></view>
						<view class="cert">
							认证企业
							<button class="nogz" @tap="toGz">{{ isgz == 1 ? '√ 关注' : '+ 关注' }}</button>
						</view>
					</view>

					<image style="width: 110rpx; height: 100rpx" :src="data.thumb"></image>
				</view>
			</view>
		</view>

		<view class="news">
			<view class="type-container_switch">
				<!-- <scroll-view class="type-navbar_switch" :scroll-x="true">
					<view class="type-box_switch">
						<view id="1"
							:class="'type-navbar-item_switch ' + (activeCategoryId == 1 ? 'type-item-on_switch' : '')"
							@tap="tabClick">在招职位</view>
					</view>
					<view class="type-box_switch">
						<view id="2"
							:class="'type-navbar-item_switch ' + (activeCategoryId == 2 ? 'type-item-on_switch' : '')"
							@tap="tabClick">企业简介</view>
					</view>

					<view class="type-box_switch">
						<view id="3"
							:class="'type-navbar-item_switch ' + (activeCategoryId == 3 ? 'type-item-on_switch' : '')"
							@tap="tabClick">企业评价</view>
					</view>
				</scroll-view> -->
				<view class="dis disAl" style="justify-content: space-around;">
					<view class="type-box_switch">
						<view id="1"
							:class="'type-navbar-item_switch ' + (activeCategoryId == 1 ? 'type-item-on_switch' : '')"
							@tap="tabClick">在招职位</view>
					</view>
					<view class="type-box_switch">
						<view id="2"
							:class="'type-navbar-item_switch ' + (activeCategoryId == 2 ? 'type-item-on_switch' : '')"
							@tap="tabClick">企业简介</view>
					</view>
				</view>
			</view>

			<view v-if="!(activeCategoryId == 1 ? false : true)">
				<!-- parse <template is="ejoblist" v-if="joblist" :data="joblist"/> -->
				<block name="ejoblist" v-if="joblist">
					<view class="joblist_2" v-for="(item, index) in joblist" :key="index">
						<view class="title_2" @tap="toJobDetail" :data-id="item.id">
							<view class="jobinfo_2">
								<view class="jobinfoleft_2">
									<view class="address_2">
										<view class="jobname_2">{{ item.jobtitle }}</view>

										<view class="moneyinfo_2">
											<block v-if="item.money == 0">面议</block>
											<block v-else>{{ item.money }}</block>
										</view>
										<view class="vprice2"></view>
									</view>

									<view class="joblable_2">{{ item.areaname }} | {{ item.education }}</view>

									<view class="special_2">
										<view class="items_2" v-for="(itemSpecial, index1) in item.speciallist"
											:key="index1">{{ itemSpecial }}</view>

										<!--
                                                    <view class="items_2" >月休</view> 
                                                    <view class="items_2" >免费培训</view>
                                                    <view class="items_2" >晋升空间</view>
                                                    <view class="items_2" >综合补贴</view>
                                                       -->
									</view>
								</view>

								<view class="jobinforight_2">
									<view class="fxmoney_2" v-if="item.vprice > 0">
										<view style="width: 200rpx; color: #fff">推荐奖300元/人</view>
										<view>入职奖100元/人</view>
									</view>
								</view>
							</view>

							<view class="detail_2">
								<view class="info_2">
									<view class="companyinfo_2" style="font-size: 0.9rem">
										{{ item.companyname }}
									</view>
									<view class="jobmoney_2">
										<view class="time_2">{{ item.updatetime }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view v-if="!(activeCategoryId == 3 ? false : true)">
			<view class="commentlist" v-for="(item, index) in commentlist" :key="index">
				<view class="commentpic">
					<image :src="item.avatarUrl"></image>
				</view>

				<view class="commenttitle">
					<view class="addresstop">{{ item.nickname }}</view>
					<view class="addresstop" style="font-size: 0.7rem; color: #ff553c">
						<block v-if="item.score == 1"><text class="fa fa-star fa-lg"></text></block>
						<block v-if="item.score == 2">
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
						</block>
						<block v-if="item.score == 3">
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
						</block>
						<block v-if="item.score == 4">
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
						</block>
						<block v-if="item.score == 5">
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
							<text class="fa fa-star fa-lg"></text>
						</block>
					</view>
					<view class="content">
						{{ item.content }}
					</view>

					<block v-if="item.piclist">
						<view class="piclist">
							<image :src="itempic" style="width: 160rpx; height: 160rpx"
								v-for="(itempic, index1) in item.piclist" :key="index1"></image>
						</view>
					</block>

					<view class="time">
						<view>{{ item.create_time }}</view>
						<view></view>
					</view>
				</view>
			</view>

			<!-- <view class="pubcomment"><button bindtap='toComment' data-id="{{data.id}}">发表评论...</button></view> -->
		</view>

		<view class="company" v-if="!(activeCategoryId == 2 ? false : true)">
			<view class="clist">
				<view class="ctitle">企业介绍</view>
				<view class="dcontent">
					<rich-text :nodes="data.content"></rich-text>
				</view>
			</view>

			<view class="clist">
				<view class="ctitle">企业地址</view>
				<view class="dcontent" @click="goMap">
					{{ data.address }}
					<view style="float: right;color: #1f72bf;display: flex;align-items: center;">
						<text>一键导航</text>
						<image :src="url+'/uploads/20250110/9d58587bb9132cac14722862895edc21.png'" mode="" style="width: 40rpx;height:40rpx;"></image>
					</view>
				</view>
			</view>

			<view class="clist">
				<view class="ctitle">企业环境照</view>
				<view class="dcontent">
					<image :src="item" v-for="(item, index) in companyimglist" :key="index"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Company
	} from './company-model.js';
	var company = new Company(); //实例化 首页 对象
	import { Config } from '../../utils/config.js';
	export default {
		data() {
			return {
				url: Config.restUrl,
				id: 0,
				title: '',
				tel: '',
				pid: 1,
				isgz: 0,
				title: '',
				activeCategoryId: '',

				data: {
					companyname: '',
					companycate: '',
					companytype: '',
					companyworker: '',
					thumb: '',
					content: '',
					address: ''
				},

				commentlist: '',
				joblist: '',
				companyimglist: ''
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(e) {
			this.onLoadClone3389(e);
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading();
			this.onLoadClone3389({});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			var that = this;
			return {
				title: that.title,
				path: '/pages/companydetail/index?id=' + that.id
			};
		},
		methods: {
			goMap: function (e) {
			    var that = this;
				console.log(that.data)
			    uni.openLocation({
			        latitude: Number(that.data.lat),
			        longitude: Number(that.data.lng),
			        scale: 18,
			        name: that.data.companyname,
			        address: that.data.address
			    });
			},
			/**
			 * 生命周期函数--监听页面加载
			 */
			onLoadClone3389: function(e) {
				var that = this;
				if (that.id > 0) {
					var id = that.id;
				} else {
					var id = e.id;
					that.id = e.id;
				}
				// uni.showShareMenu({
				// 	withShareTicket: true,
				// 	menus: ['shareAppMessage', 'shareTimeline']
				// });
				that.setData({
					activeCategoryId: that.pid
				});
				var params = {
					id: that.id
				};
				company.getCompanyUserDetailData((data) => {
					uni.setNavigationBarTitle({
						title: data.companyinfo.companyname
					});
					that.title = data.companyinfo.companyname;
					that.isgz = data.companyinfo.isgz;
					that.setData({
						data: data.companyinfo,
						commentlist: data.commentlist,
						isgz: that.isgz,
						joblist: data.joblist,
						companyimglist: data.companyinfo.companyimg
					});
					uni.hideNavigationBarLoading(); //完成停止加载
					uni.stopPullDownRefresh();
				}, params);
			},

			toContact: function() {
				var that = this;
				var companyid = that.id;
				uni.navigateTo({
					url: '/pages/wechat/index?id=' + companyid
				});
			},

			tabClick: function(e) {
				var pid = e.currentTarget.id;
				var that = this;
				that.pid = pid;
				that.setData({
					activeCategoryId: pid
				});
			},

			toJobDetail: function(e) {
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/jobdetail/index?id=' + id
				});
			},

			toGz: function(e) {
				var that = this;
				var companyid = that.id;
				var params = {
					companyid: that.id
				};
				company.gzCompany((data) => {
					if (data.status == 0) {
						that.isgz = 1;
						that.setData({
							isgz: 1
						});
						uni.showToast({
							title: data.msg,
							icon: 'success',
							duration: 2000
						});
					} else {
						that.isgz = 0;
						that.setData({
							isgz: 0
						});
						uni.showToast({
							title: data.msg,
							icon: 'success',
							duration: 2000
						});
					}
				}, params);
			}
		}
	};
</script>
<style>
	@import '../templates/css/index_2.css';

	.container {
		background-color: #ffffff;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.container .header {
		width: 100%;
		height: 320rpx;
		display: flex;
		flex-direction: column;
	}

	.companyinfo {
		display: flex;
		flex-direction: column;
	}

	.companyname {
		width: 700rpx;
		color: #fff;
		font-size: 18px;
		padding-top: 30rpx;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.container .header .pic {
		width: 700rpx;

		align-self: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 10rpx;

		margin-top: 20rpx;
	}

	.container .header .pic image {
		width: 120rpx;
		height: 120rpx;
		border: 0rpx solid #fff;
		/*
   border-radius: 120rpx;
   */
	}

	.container .header .pic .userinfo {
		width: 700rpx;

		font-size: 16px;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cert {
		display: flex;
		flex-direction: row;
	}

	.nogz {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid #fff;
		background: #2577f5;
		color: #fff;

		font-size: 12px;
	}

	.setting {
		position: absolute;
		top: 30rpx;
		left: 580rpx;
		display: flex;
		flex-direction: row;
		color: #fff;
		font-size: 0.6rem;
		font-weight: bold;
	}

	.setting image {
		width: 35rpx;
		height: 35rpx;
	}

	.opencard {
		font-size: 0.7rem;
		color: #fff;

		height: 65rpx;
		border-radius: 30rpx;
		margin-left: 70%;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.opencard image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	button::after {
		border: none;
	}

	.noteinfo {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.notename {
		width: 700rpx;
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		align-self: center;
	}

	.notename view:nth-child(1) {
		font-weight: 600;
		font-size: 1.1rem;
	}

	.notescore {
		width: 700rpx;
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		font-size: 0.7rem;
		color: #6a6a6a;
		align-self: center;
	}

	.notescore text {
		color: #fe552e;
	}

	.noteservice {
		width: 700rpx;
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		font-size: 0.7rem;
		color: #6a6a6a;
		align-self: center;
	}

	.noteaddress {
		width: 700rpx;
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		font-size: 0.7rem;
		color: #000;
		align-self: center;
		justify-content: space-between;
	}

	.noteaddress image {
		width: 40rpx;
		height: 40rpx;
	}

	.noteaddress button {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		color: #3c9bdf;
		border: 1rpx solid #3c9bdf;
		font-size: 0.7rem;
	}

	.line {
		width: 700rpx;
		background: #efefef;
		height: 2rpx;
		align-self: center;
		margin-top: 30rpx;
	}

	.news {
		margin-top: 30rpx;
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.news .newstitle {
		width: 700rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		font-size: 0.7rem;
		border-bottom: 0rpx solid #efefef;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-content: center;
		margin-bottom: 20rpx;
	}

	.news .newstitle view {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 1.2rem;
		font-weight: bold;
	}

	.newslist {
		display: flex;
		flex-direction: row;
		width: 720rpx;
		margin: 0 auto;
		border-bottom: 1px solid #efefef;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.newslist .pic {
		width: 35%;
		height: 220rpx;
		line-height: 220rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.newslist .pic image {
		width: 300rpx;
		height: 210rpx;
		border-radius: 8rpx;
	}

	.newslist .title {
		width: 65%;
		flex-direction: column;
		display: flex;
		justify-content: space-between;
		height: 200rpx;
	}

	.newslist .title .address {
		padding-left: 5%;
		text-align: left;
		color: #000;
		font-size: 1rem;
		font-weight: 600;
	}

	.newslist .title .housearea {
		padding-left: 5%;
		text-align: left;
		font-size: 0.7rem;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		color: #999;
	}

	.newslist .title .address text {
		color: #1aac19;
	}

	.newslist .title .perprice {
		padding-left: 5%;
		font-size: 1rem;
		color: #d65408;
		font-weight: bold;
		width: 95%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.perprice view:nth-child(2) {
		width: 180rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 8rpx;
		font-size: 0.7rem;
	}

	.newslist .title .price {
		padding-left: 5%;
		text-align: left;
		font-size: 0.6rem;
		color: #6a6a6a;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		align-self: baseline;
		width: 450rpx;
	}

	.newslist .title .price view text {
		padding: 5rpx 7rpx;
		border-radius: 3rpx;
		margin-right: 5rpx;
		height: 20rpx;
		line-height: 20rpx;
		color: #77af6e;
		background: #f7f5f6;
	}

	.newslist .title .price .money {
		color: #d65408;
		font-weight: bold;
		font-size: 0.8rem;
		padding-right: 10rpx;
	}

	.company {
		display: flex;
		flex-direction: column;
		width: 700rpx;
		margin: 0 auto;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.company .clist {
		width: 700rpx;
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
	}

	.company .clist .ctitle {
		font-weight: bold;
		font-size: 18px;
	}

	.company .clist .dcontent {
		margin-top: 15rpx;

		font-size: 16px;
		color: #888888;
	}

	.company .clist .icontent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.company .clist .icontent image {
		width: 700rpx;
		margin-bottom: 10rpx;
	}

	.commentlist {
		display: flex;
		flex-direction: row;
		width: 720rpx;
		margin: 0 auto;
		border-bottom: 1px solid #efefef;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.commentlist .commentpic {
		width: 20%;

		justify-content: center;
		display: flex;
	}

	.commentlist .commentpic image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.commentlist .commenttitle {
		width: 75%;
		flex-direction: column;
		display: flex;
		justify-content: space-between;
		padding-top: 5rpx;
	}

	.commentlist .commenttitle .addresstop {
		padding-left: 5%;
		width: 100%;
		font-size: 0.8rem;
		color: #000;
	}

	.commentlist .commenttitle .content {
		margin-top: 20rpx;
		padding-left: 5%;
		text-align: left;
		font-size: 0.9rem;
		color: #767988;
	}

	.piclist {
		margin-top: 20rpx;
		padding-left: 5%;
		text-align: left;
		font-size: 0.9rem;
		color: #000;

		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.piclist>image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}

	.commentlist .commenttitle .gomore {
		margin-top: 20rpx;
		padding-left: 5%;
		text-align: left;
		font-size: 0.8rem;
		color: #767988;
	}

	.commentlist .commenttitle .time {
		margin-top: 20rpx;
		padding-left: 5%;
		text-align: left;
		font-size: 0.7rem;
		color: #9b9b9b;
		display: flex;
		justify-content: space-between;
	}

	.type-container_switch {
		width: 730rpx;
		height: 88rpx;
		background-color: #fff;
		overflow: hidden;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		border-radius: 30rpx 30rpx 0 0;

		margin-top: -50rpx;
	}

	.type-navbar_switch {
		white-space: nowrap;
		height: 88rpx;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.type-box_switch {
		width: 33.333%;
		box-sizing: content-box;
		font-size: 24rpx;
		line-height: 84rpx;
		text-align: center;
		display: inline-block;
		overflow: hidden;
	}

	.type-navbar-item_switch {
		border-bottom: 4rpx solid #fff;
		font-size: 1rem;
		font-weight: 600;
		/* width: 100rpx; */
	}

	.type-item-on_switch {
		border-bottom: 4rpx solid #0180cf;
		color: #0180cf;
		/* width: 100rpx; */
	}

	.weixinmao-float {
		height: 150rpx;
	}

	.weixinmao-foot {
		display: flex;
		justify-content: center;
		flex-direction: row;
		position: fixed;
		z-index: 999;
		left: 0;
		bottom: 0;
		width: 100%;
	}

	.footer button {
		color: #fff;
		align-self: center;
		height: 80rpx;
		font-size: 1.5rem;
		display: flex;
		flex-direction: column;
		background: #0180cf;
		text-align: center;
		padding-top: 10rpx;
		border: 0rpx;
	}

	button::after {
		border: none;
	}

	.weixinmao-foot view:nth-child(1) {
		color: #fff;
		align-self: center;
		height: 80rpx;
		font-size: 0.9rem;
		display: flex;
		flex-direction: column;
		background: #0180cf;
		width: 20%;
		text-align: center;
		padding-top: 20rpx;
	}

	.weixinmao-foot view:nth-child(2) {
		color: #fff;
		align-self: center;
		height: 80rpx;
		font-size: 0.9rem;
		display: flex;
		flex-direction: column;
		background: #11cd6e;
		width: 20%;
		text-align: center;
		padding-top: 20rpx;
	}

	.weixinmao-foot view:nth-child(3) {
		align-self: center;
		height: 80rpx;
		font-size: 0.9rem;
		display: flex;
		flex-direction: column;
		width: 20%;
		text-align: center;
		padding-top: 20rpx;
		background: #fff;
	}

	.black {
		color: #777676;
	}

	.red {
		color: red;
	}

	.weixinmao-foot view:nth-child(4) {
		color: #fff;
		align-self: center;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 0.9rem;
		display: flex;
		flex-direction: column;
		background: #fe552e;
		width: 40%;
	}

	.weixinmao-foot view image {
		width: 50rpx;
		height: 50rpx;
		align-self: center;
	}

	.footerbutton {
		background: #fe552e;
	}

	@import 'undefined';
</style>